<template>
  <div class="service-commission">
    <tags :labels="labels" :current-label="currentLabel" @clickLabel="clickLabel" class="tag">
      <ul class="list" v-if="current !== 4">
        <li
          class="list-item border-bottom-1px"
          v-for="(item, index) in list"
          :key="index"
        >
          <div class="amount">
            ￥{{ +item.amount }}
          </div>
          <div class="desc">
            <p class="time">提现时间: {{ item.create_time }}</p>
            <p class="time">提现金额: ￥{{ +item.amount }}</p>
            <p class="time">服务费: ￥{{ +item.service }}</p>
            <p class="time">实际到帐: ￥{{ +item.amount - +item.service }}</p>
            <p class="time">姓名: ￥{{ item.nickname }}</p>
            <p class="time">银行: ￥{{ item.bank_name }}</p>
            <p class="time">银行卡: ￥{{ item.bank_number }}</p>
            <p class="time">预留手机: ￥{{ item.mobile }}</p>
            <p class="time">状态: {{ item.status | statusText }}</p>
            <p class="time" v-if="+item.status === 1">到帐时间: {{ item.update_time }}</p>
            <p class="time" v-if="+item.status === -1">驳回原因: <span>{{ item.reject }}</span></p>
          </div>
        </li>
      </ul>
      <pull-up
        v-if="current !== 4"
        :loading="loading"
        :busy="queryList.busy"
        @loadMore="loadMore" />
      <div class="cash" v-if="current === 4">
        <cash @ok="cashOk" />
      </div>
      <loading :show="loading" />
    </tags>
  </div>
</template>

<script>
import Tags from '../components/Tags'
import Loading from '@/components/Loading'
import api from '@/api'
import base64 from '@/util/base64'
import PullUp from '@/components/PullUp'
import Cash from './components/Cash'
export default {
  name: 'ServiceCash',
  components: {
    Tags,
    Loading,
    PullUp,
    Cash
  },
  computed: {
    currentLabel() {
      return this.labels[this.current]
    }
  },
  filters: {
    statusText(v) {
      let text = ''
      if (+v === 0) {
        text = '审核中'
      } else if (+v === 1) {
        text = '已到帐'
      } else if (+v === -1) {
        text = '已驳回'
      }
      return text
    }
  },
  data() {
    return {
      labels: [],
      current: 0,
      list: [],
      loading: false,
      queryList: {}
    }
  },
  methods: {
    loadMore() {
      setTimeout(() => {
        this.getList(true)
      }, 200)
    },
    getList(append = false) {
      if (this.queryList.busy === false) {
        this.queryList.page++
        this.loading = true
        this.queryList.busy = true
        api.My.cashList({
          ...this.queryList,
          type: this.current
        }).then(response => {
          let { data } = response
          data = base64.parse(data)
          if (data.list.length === 0) {
            this.queryList.busy = true
          } else {
            this.queryList.busy = false
            if (append) {
              this.list = this.list.concat(data.list)
            } else {
              this.list = data.list
            }
          }
        }).finally(() => {
          this.loading = false
        })
      }
    },
    createTags () {
      const tags = []
      tags[0] = '全部'
      tags[1] = '已到帐'
      tags[2] = '审核中'
      tags[3] = '已驳回'
      tags[4] = '提一笔'
      this.labels = tags
    },
    clickLabel(index) {
      this.current = index
      if (index !== 4) {
        this.init()
        this.queryList.busy = false
        this.list = []
        this.getList()
      }
    },
    init() {
      this.queryList = {
        page: 0,
        pageSize: 10,
        busy: false
      }
    },
    cashOk() {
      this.current = 2
    }
  },
  created () {
    this.current = Number.parseInt(this.$route.params.type || 0)
    this.createTags()
    this.init()
    this.getList()
  },
  deactivated () {
    this.queryList.busy = true
  }
}
</script>

<style scoped lang="stylus">
.service-commission
  background white
  padding-bottom 30px
  border-radius 10px
  .list
    margin-bottom 15px
    .list-item
      display flex
      padding 10px
      margin-bottom 10px
      .amount
        width 100px
        line-height 100px
        font-weight 700
        font-size 16px
        color red
      .desc
        flex 1
        text-align left
        p
          height 25px
          line-height 25px
          span
            color red
</style>
